<template>
  <div>
    <userTitel :title="title"></userTitel>
    <!-- 卡片 -->
    <div class="card">
      <el-card class="cardLeft" shadow="never">
        <!-- 树形 -->
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-card>
      <el-card shadow="never" class="cardRight">
        <h4 style="background: #f8faff">作业范围</h4>
        <el-button
          @click="toggle"
          class="edit"
          style="float: right; padding: 3px 0"
          type="text"
          >编辑</el-button
        >
        <!-- <div v-else>
          <el-button
            class="edit"
            style="float: right; padding: 3px 0"
            type="text"
            >确定</el-button
          >
          <el-button
            class="edit"
            style="float: right; padding: 3px 0"
            type="text"
            >取消</el-button
          >
        </div> -->
        <span>地图关键字 : </span>
        <el-input
          style="width: 230px"
          placeholder="请输入地区关键字"
          v-model="input1"
        >
        </el-input>
        <div>
          <baidu-map
            :scroll-wheel-zoom="true"
            id="allmap"
            class="map"
            :center="obj"
            :zoom="15"
          >
            <bm-polygon
              :path="polygonPath"
              stroke-color="blue"
              :stroke-opacity="0.5"
              :stroke-weight="2"
              :editing="true"
              @lineupdate="updatePolygonPath"
            />
          </baidu-map>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getLogistics, getScope } from "@/api/organization-manage";
export default {
  name: "institutions-jobs-area",
  data() {
    return {
      input1: "",
      title: "机构作业范围",
      // 树形渲染
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 地图折勾线的点
      polygonPath: [],
      // 坐标
      obj: { lng: 116.412732, lat: 39.911707 },
      // 地图
      editing: true,
    };
  },

  created() {
    this.getLogisticsXX();
  },

  methods: {
    async getLogisticsXX() {
      const res = await getLogistics();
      const newRes = JSON.parse(res.data);
      this.data = newRes;
      console.log(newRes);
    },
    async handleNodeClick(data) {
      // console.log(data);
      const res = await getScope(data.id, 1, { 0: data.id });
      console.log(res.data.polygon);
      // 修改对象
      function newkey(arr, key) {
        let newArr = [];
        arr.forEach((item) => {
          let newObj = {};
          for (let i = 0; i < key.length; i++) {
            newObj[key[i]] = item[Object.keys(item)[i]];
          }
          newArr.push(newObj);
        });
        return newArr;
      }
      if (res.data.polygon !== null) {
        this.polygonPath = newkey(res.data.polygon, ["lng", "lat"]);
      } else {
        return false;
      }

      this.obj = { lng: res.data.longitude, lat: res.data.latitude };
      console.log(this.obj);
      // this.polygonPath.push(this.obj);
      // console.log(obj);
      // console.log(this.polygonPath);
    },
    // 覆盖发生变化触发
    updatePolygonPath(e) {
      this.polygonPath = e.target.getPath();
      // console.log(this.polygonPath);
    },
    // 点击编辑
    toggle() {
      console.log(123);
      // this.polyline = !this.polyline;
    },
  },
};
</script>

<style scoped lang="scss">
/* 设定地图的大小 */
#allmap {
  height: 600px;
  width: 1400px;
  // margin: 0 auto;
  margin-top: 20px;
}
.edit {
  width: 90px;
  height: 35px;
  margin-top: -65px;
  background-color: #e15536;
  color: #fff;
}
.cardRight {
  width: 80vw;
}
.card {
  display: flex;
}
.cardLeft {
  margin-right: 20px;
  width: 214px;
  height: 810px;
}
::v-deep .el-card__body {
  text-align: left !important;
  line-height: 24px !important;
  // background: #f8faff;
}
h4 {
  margin-top: -20px;
  margin-left: -20px;
  margin-right: -20px;
  height: 20px;
  padding: 20px;
}
</style>
